<template>
    <div>
        <TitleBar class="absolute top-0 left-0 w-[450px]">人员进入</TitleBar>
        <div class="person_enter">
            <div class="pic">
                <img :src="personalData.imageUrl || require('./assets/visitorPic.svg') " >
            </div>
            <div class="type">
                <div class="oener_visitor">类型：
                    <span v-if="personalData.recordType=='0'">业主</span>
                    <span v-else-if="personalData.recordType=='2'">访客</span>
                    <span v-else-if="personalData.recordType=='5'">其它</span>
                    <span v-else>——</span>
                </div>
                <div class="location"><img :src="require('./assets/localtion_icon.png')">&nbsp;&nbsp;{{personalData.deviceName || '暂无数据'}}</div>
            </div>
            <div class="enter_time">
                <img :src="require('./assets/time_icon.png')">&nbsp; 
                <span>{{personalData.eventTime ||'暂无数据'}}</span>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { enterPersonNum} from './api'; 
import TitleBar from '../components/TitleBar.vue'
export default defineComponent({
    components: {TitleBar},
    inject: ['villageId'],
    data(){
        return {
            personalData:{
                eventTime:'',
                recordType:'',
                imageUrl:'',
                deviceName:'', /*进入小区的地址*/
            },
        }
        
    },
    mounted() {
        this.setIntervalTotalFn()
    },
    activated(){
        this.setIntervalTotalFn()
    },
    destroyed(){
        clearInterval(this.timer);
        this.timer = null;
    },
    methods:{
        setIntervalTotalFn() {
            const villageId = this.villageId
            if(villageId){
                this.getEnterPersonNum(villageId);
                this.timer = null;
                this.timer = setInterval(() => {
                    this.getEnterPersonNum(villageId);
                }, 20000);
            }
        },
        getEnterPersonNum(villageId){
            // return
            enterPersonNum({villageId: villageId}).then(res=>{
                if(res.success == true && res.data.length > 0){
                    this.personalData.eventTime = res.data[0].eventTime || ''
                    this.personalData.recordType = res.data[0].recordType+'' || ''
                      console.log('===>',this.personalData.recordType)
                    this.personalData.imageUrl = res.data[0].imageUrl || ''
                    this.personalData.deviceName = res.data[0].deviceName || ''
                } else {
                    this.personalData= {
                        eventTime:'',
                        recordType:'',
                        imageUrl:'',
                        deviceName:''
                    }
                }
            })
        },
    }
})

</script>

<style scoped lang="scss">
.person_enter{
    display: flex;
    height: 80%;
    flex-direction: row;
    align-items: center;
    .pic{
        flex: 1;
        // display: flex;
        // transform: translate(0px, 0);
        width: 80px;
        height: 80px;
        text-align: center;
        img{
           width: 80px;
            height: 80px; 
            display: inline-block;
        }
    }
    .type{
        flex: 1;
        .oener_visitor{
            color: #E0F7FF;
            font-family: 'OPPOSans';
            font-style: normal;
            font-weight: 400;
            font-size: 14px;
            line-height: 20px;
            margin: 10px 0 10px 0;
        }
        .location{
            font-family: 'OPPOSans';
            font-style: normal;
            font-weight: 400;
            font-size: 12px;
            line-height: 20px;
            color: #E0F7FF;
        }
    }
    .enter_time{
        flex: 1;
        width: 119px;
        height: 20px;
        color:#E0F7FF;
        font-family: 'OPPOSans';
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        line-height: 20px;
    }
}
</style>